<!doctype html><html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="IE=edge,chrome=1">
<title>根据国家显示国旗图标 - Taxodium</title>
<meta name=renderer content="webkit">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1">
<meta http-equiv=cache-control content="no-transform">
<meta http-equiv=cache-control content="no-siteapp">
<meta name=theme-color content="#f8f5ec">
<meta name=msapplication-navbutton-color content="#f8f5ec">
<meta name=apple-mobile-web-app-capable content="yes">
<meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec">
<meta name=author content="Spike Leung"><meta name=description content="&#34;&#34;"><meta name=keywords content="[]">
<meta name=generator content="Hugo 0.88.1 with theme even">
<link rel=canonical href=http://localhost:1313/taxodium/post/make-country-flag-icon/>
<link rel=apple-touch-icon sizes=180x180 href=/taxodium/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=/taxodium/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/taxodium/favicon-16x16.png>
<link rel=manifest href=/taxodium/manifest.json>
<link rel=mask-icon href=/taxodium/safari-pinned-tab.svg color=#5bbad5>
<script async src=//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js></script>
<link href=/taxodium/sass/main.min.f92fd13721ddf72129410fd8250e73152cc6f2438082b6c0208dc24ee7c13fc4.css rel=stylesheet>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin=anonymous>
<meta property="og:title" content="根据国家显示国旗图标">
<meta property="og:description" content="&#34;&#34;">
<meta property="og:type" content="article">
<meta property="og:url" content="http://localhost:1313/taxodium/post/make-country-flag-icon/"><meta property="article:section" content="post">
<meta property="article:published_time" content="2021-08-15T11:29:49+08:00">
<meta property="article:modified_time" content="2021-09-13T09:46:52+08:00">
<meta itemprop=name content="根据国家显示国旗图标">
<meta itemprop=description content="&#34;&#34;"><meta itemprop=datePublished content="2021-08-15T11:29:49+08:00">
<meta itemprop=dateModified content="2021-09-13T09:46:52+08:00">
<meta itemprop=wordCount content="728">
<meta itemprop=keywords content="emoji,js,node.js,"><meta name=twitter:card content="summary">
<meta name=twitter:title content="根据国家显示国旗图标">
<meta name=twitter:description content="&#34;&#34;"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]-->
</head>
<body>
<div id=mobile-navbar class=mobile-navbar>
<div class=mobile-header-logo>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<div class=mobile-navbar-icon>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id=mobile-menu class="mobile-menu slideout-menu">
<ul class=mobile-menu-list>
<a href=/taxodium/>
<li class=mobile-menu-item>Home</li>
</a><a href=/taxodium/post/>
<li class=mobile-menu-item>Archives</li>
</a><a href=/taxodium/tags/>
<li class=mobile-menu-item>Tags</li>
</a><a href=/taxodium/categories/>
<li class=mobile-menu-item>Categories</li>
</a><a href=/taxodium/about/>
<li class=mobile-menu-item>About</li>
</a>
</ul>
</nav>
<div class=container id=mobile-panel>
<header id=header class=header>
<div class=logo-wrapper>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<nav class=site-navbar>
<ul id=menu class=menu>
<li class=menu-item>
<a class=menu-item-link href=/taxodium/>Home</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/post/>Archives</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/tags/>Tags</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/categories/>Categories</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/about/>About</a>
</li>
</ul>
</nav>
</header>
<main id=main class=main>
<div class=content-wrapper>
<div id=content class=content>
<article class=post>
<header class=post-header>
<h1 class=post-title>根据国家显示国旗图标</h1>
<div class=post-meta>
<span class=post-time> 2021-08-15 </span>
<div class=post-category>
<a href=/taxodium/categories/%E5%AE%9E%E8%B7%B5%E6%80%BB%E7%BB%93/> 实践总结 </a>
</div>
<span class=more-meta> 728 words </span>
<span class=more-meta> 2 mins read </span>
<span id=busuanzi_container_page_pv class=more-meta> <span id=busuanzi_value_page_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> times read </span>
</div>
</header>
<div class=post-toc id=post-toc>
<h2 class=post-toc-title>Contents</h2>
<div class="post-toc-content always-active">
<nav id=TableOfContents>
<ul>
<li><a href=#headline-1>前言</a>
</li>
<li><a href=#headline-2>获取国旗图标</a>
</li>
<li><a href=#headline-3>Emoji 实现国旗图标</a>
</li>
<li><a href=#headline-4>Emoji 存在的问题</a>
</li>
<li><a href=#headline-5>最终解决方案</a>
<ul>
<li><a href=#headline-6>Tips</a>
</li>
</ul>
</li>
<li><a href=#headline-7>参考链接</a>
</li>
</ul>
</nav>
</div>
</div>
<div class=post-content>
<div id=outline-container-headline-1 class=outline-2>
<h2 id=headline-1>
前言
</h2>
<div id=outline-text-headline-1 class=outline-text-2>
<p>
项目中，要根据返回的国家名称显示对应的国旗图标。实现思路很简单，找到对应的国旗图片，然后根据返回的国家名匹配对应的图片就可以了。</p>
</div>
</div>
<div id=outline-container-headline-2 class=outline-2>
<h2 id=headline-2>
获取国旗图标
</h2>
<div id=outline-text-headline-2 class=outline-text-2>
<p>
一开始，打算在网上找点相关的Icon，但是很多找到的，有的要付费 <a href="https://www.flaticon.com/search?word=country%20flag">flaticon</a>，不付费的也不好看，有点杂乱。后来，找到了 <a href=https://www.countryflags.com/en/>COUNTRYFLAGS</a> 这个网站，
国旗比较齐全，也比较美观，可以选择下载的类型和尺寸也很多，唯一的不足是没找到批量下载的方法，190+ 的国旗一个个下载也很费劲。
于是想，有没有更简便的方法？无意中，看到了 Emoji ，想起来，在手机上输入 <code>中国</code> 的时候，会出现一个 Emoji 图标， <code>🇨🇳</code> ，所以是不是可以用 Emoji 实现呢？</p>
</div>
</div>
<div id=outline-container-headline-3 class=outline-2>
<h2 id=headline-3>
Emoji 实现国旗图标
</h2>
<div id=outline-text-headline-3 class=outline-text-2>
<p>
简单的说，Emoji 本质是一些字符，可能是多个字符组合出来，像是中国的国旗 Emoji，其实是 <code>🇨🇳</code> ( <code>CN</code> )这两个字符组合而成的，
注意这里不是我们平时使用的英文 <code>C</code>, <code>N</code>,而是 Unicode 字符集里非常靠后的另外两个字符。
而为了让返回的国家和 Emoji 能够对应起来，我们需要一套<a href=https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2>规则</a>：
<code>CN</code> 表示中国， <code>DE</code> 表示德国…， 只要得到国家的国家编号，然后找到这两个字母在 Unicode 字符集的位置，
获取可以生成 Emoji 的 Unicode 字符，然后把获取的字符渲染到页面即可。
<a href=https://github.com/thekelvinliu/country-code-emoji/blob/master/src/index.js>Country Code Emoji</a> 中的方法可以帮我们根据国家编号 (<code>CN</code>) 找到其在 Unicode 中对应的位置。</p>
</div>
</div>
<div id=outline-container-headline-4 class=outline-2>
<h2 id=headline-4>
Emoji 存在的问题
</h2>
<div id=outline-text-headline-4 class=outline-text-2>
<p>
用 Emoji 实现国旗是很方便的，不需要下载图片，只要去找国家代码对应的 Unicode 然后进行渲染即可。
但是遗憾的是， <code>Window</code> 系统下，并不支持国旗的 Emoji ，就 <code>Mac</code> 的系统支持. 为了在不同的系统都能显示,
还是得使用 PNG 图片的形式。</p>
</div>
</div>
<div id=outline-container-headline-5 class=outline-2>
<h2 id=headline-5>
最终解决方案
</h2>
<div id=outline-text-headline-5 class=outline-text-2>
<p>到 <a href=https://www.countryflags.com/en/> COUNTRYFLAGS </a>下载对应的国旗png图片，按照 <a href=https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2>ISO 3166-1 alpha-2</a> 进行命名，然后根据国家编码去对应获取就好。如中国( <code>CN</code> )就渲染 <code>CN.png</code>.</p>
<div id=outline-container-headline-6 class=outline-3>
<h3 id=headline-6>
Tips
</h3>
<div id=outline-text-headline-6 class=outline-text-3>
<p>在 <a href=https://www.countryflags.com/en/> COUNTRYFLAGS </a> 一张张点下载太慢了，可以写个小脚本，批量下载下来。可以参考 <a href=https://github.com/Spike-Leung/flag-download>flag-download</a>。</p>
</div>
</div>
</div>
</div>
<div id=outline-container-headline-7 class=outline-2>
<h2 id=headline-7>
参考链接
</h2>
<div id=outline-text-headline-7 class=outline-text-2>
<ul>
<li>
<p><a href=https://www.countryflags.com/en/>COUNTRYFLAGS</a></p>
</li>
<li>
<p><a href=https://www.kirupa.com/html5/emoji.htm>Using Emojis in HTML, CSS, and JavaScript</a></p>
</li>
<li>
<p><a href=https://thekevinscott.com/emojis-in-javascript/>Emojis in Javascript</a></p>
</li>
<li>
<p><a href=https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2>ISO 3166-1 alpha-2</a></p>
</li>
<li>
<p><a href=https://github.com/thekelvinliu/country-code-emoji/blob/master/src/index.js>country-code-emoji</a></p>
</li>
<li>
<p><a href=https://stackoverflow.com/questions/54519758/flag-emojis-not-rendering>Flag Emojis not rendering</a></p>
</li>
</ul>
</div>
</div>
</div>
<div class=post-copyright>
<p class=copyright-item>
<span class=item-title>Author</span>
<span class=item-content>Spike Leung</span>
</p>
<p class=copyright-item>
<span class=item-title>LastMod</span>
<span class=item-content>
2021-09-13
<a href=https://github.com/Spike-Leung/taxodium/commit/c46287c750d66abf831afdc6dd4d1872ccf27225 title="refactor: change blog categories">(c46287c)</a>
</span>
</p>
<p class=copyright-item>
<span class=item-title>License</span>
<span class=item-content><a rel="license noopener" href=https://creativecommons.org/licenses/by-nc-nd/4.0/ target=_blank>CC BY-NC-ND 4.0</a></span>
</p>
</div>
<footer class=post-footer>
<div class=post-tags>
<a href=/taxodium/tags/emoji/>emoji</a>
<a href=/taxodium/tags/js/>js</a>
<a href=/taxodium/tags/node.js/>node.js</a>
</div>
<nav class=post-nav>
<a class=prev href=/taxodium/post/svn-cheatsheet/>
<i class="iconfont icon-left"></i>
<span class="prev-text nav-default">SVN Cheatsheet</span>
<span class="prev-text nav-mobile">Prev</span>
</a>
<a class=next href=/taxodium/post/make-svg-map-outline/>
<span class="next-text nav-default">制作SVG地图轮廓</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i>
</a>
</nav>
</footer>
</article>
</div>
<script src=https://utteranc.es/client.js repo=Spike-Leung/taxodium issue-term=pathname theme=github-light crossorigin=anonymous async></script>
<noscript>Please enable JavaScript to view the <a href=https://github.com/utterance>comments powered by utterances.</a></noscript>
</div>
</main>
<footer id=footer class=footer>
<div class=social-links>
<a href=mailto:l-yanlei@hotmail.com class="iconfont icon-email" title=email></a>
<a href=https://github.com/Spike-Leung class="iconfont icon-github" title=github></a>
<a href=http://localhost:1313/taxodium/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a>
</div>
<div class=copyright>
<span class=power-by>
Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span>
<span class=division>|</span>
<span class=theme-info>
Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span>
<div class=busuanzi-footer>
<span id=busuanzi_container_site_pv> site pv: <span id=busuanzi_value_site_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
<span class=division>|</span>
<span id=busuanzi_container_site_uv> site uv: <span id=busuanzi_value_site_uv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
</div>
<span class=copyright-year>
&copy;
2017 -
2021<span class=heart><i class="iconfont icon-heart"></i></span><span>Spike Leung</span>
</span>
</div>
</footer>
<div class=back-to-top id=back-to-top>
<i class="iconfont icon-up"></i>
</div>
</div>
<script src=https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin=anonymous></script>
<script>var languageCode="en".replace(/-/g,'_').replace(/_(.*)/,function(b,a){return b.replace(a,a.toUpperCase())});timeago().render(document.querySelectorAll('.timeago'),languageCode),timeago.cancel()</script>
<script type=text/javascript src=/taxodium/js/main.min.c99b103c33d1539acf3025e1913697534542c4a5aa5af0ccc20475ed2863603b.js></script>
<script id=baidu_push>(function(){var a,c,b;if(window.location.hostname==='localhost')return;a=document.createElement('script'),a.async=!0,c=window.location.protocol.split(':')[0],c==='https'?a.src='https://zz.bdstatic.com/linksubmit/push.js':a.src='http://push.zhanzhang.baidu.com/push.js',b=document.getElementsByTagName("script")[0],b.parentNode.insertBefore(a,b)})()</script>
</body>
</html>